<template>
	<!-- 登录 -->
	<view class="container">
		<image src="../../static/APPlogo.png" mode=""></image>
		<view class="login">
			<view class="title">
				登录
			</view>
			<input type="text" v-model="phone" @blur="changetel" placeholder="请输入手机号码" style="border-bottom: 2upx solid #D3D3D3;" />
			<view class="psd">
				<input type="text" v-model="captcha" placeholder="请输入验证码" />
				<button class="btn" @tap="Obtain" :disabled="disabled">{{btnTitle}}</button>
				<!-- <view class="btn" @tap="Obtain">
					{{btnTitle}}
				</view> -->
			</view>
		</view>
		<view class="loginBtn" @tap="login">
			登录
		</view>
		<view class="Agreement">
			<view class="selects" @tap="changeSelect" :class="{active:selset}"></view>
			<view class="titleS">
				<view class="selectitle" @tap="changeSelect">
					我已阅读并同意
				</view>
				<view class="link" @tap="goDetaile">《用户协议及隐私政策》</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				disabled: false,
				btnTitle: '获取验证码',
				phone: '',
				captcha: '',
				selset:false
			};
		},
		onLoad() {
			uni.getStorage({
			    key: 'token',
			    success: function (res) {
			        // console.log(res.data);
			    }
			});
		},
		methods: {
			goDetaile(){
				uni.navigateTo({
					url: 'Agreement/Agreement',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			changeSelect(){
				this.selset=!this.selset
			},
			changetel() {
				if (!/^1[3456789]\d{9}$/.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						duration: 2000,
						icon: "none"
					});
					this.phone = "";
				}
			},
			login() { //登录
				if (!this.captcha) {
					uni.showToast({
						title: '验证码不能为空',
						icon: 'none',
						duration: 2000
					});
				} else if(!this.selset){
					uni.showToast({
						title: '请先仔细阅读并同意用户协议及隐私政策',
						icon:'none',
						duration:2000
					});
				}else{
					uni.request({
						url: this.webUrl + '/user/login/appLogin',
						method: 'POST',
						data: {
							phone: this.phone,
							captcha: this.captcha
						},
						success: res => {
							console.log(res)
							if (res.data.code == 0) {
								uni.setStorage({
									key: 'user',
									data: res.data.data.user,
									success: function() {
									}
								});
								uni.setStorage({
									key: 'token',
									data: res.data.data.token,
									success: function() {
										console.log('登录成功');
										uni.showToast({
											title: '登录成功',
											icon: 'none',
											duration: 2000
										});
										setTimeout(() => {
											uni.reLaunch({
											    url: '../index/index'
											});
										}, 2000)
									}
								});
							}else if(res.data.code==1){
								uni.showToast({
									title: '验证码错误，请重试',
									icon: 'none',
									duration: 2000
								});
							}else if(res.data.code==3){
								uni.showToast({
									title: res.data.msg,
									icon: 'none',
									duration: 2000
								});
							}else{
								uni.showToast({
									title: '网络错误，请重试',
									icon: 'none',
									duration: 2000
								});
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			Obtain() {
				//获取验证码
				if (!this.phone) {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none',
						duration: 2000
					});
				} else {
					uni.request({              //请求验证码
						url: this.webUrl + '/index/index/sendsms',
						method: 'POST',
						data: {
							phone: this.phone,
							type:0
						},
						success: res => {
							// console.log(res)
							if (res.data.code == 1) {
								uni.showToast({
									title: '手机号不能为空',
									icon: 'none',
									duration: 2000
								});
							} else if (res.data.code == 3) {
								uni.showToast({
									title: res.data.msg,
									icon: 'none',
									duration: 2000
								});
							} else if(res.data.code==0){
								//倒计时
								uni.showToast({
									title: '短信发送成功',
									icon: 'none',
									duration: 2000
								});
								let time = 60;
								let timer = setInterval(() => {
									if (time == 0) {
										clearInterval(timer);
										this.disabled = false;
										this.btnTitle = "获取验证码";
									} else {
										this.btnTitle = time + '秒后重试';
										this.disabled = true;
										time--
									}
								}, 1000)
							}else{
								uni.showToast({
									title: '网络错误，请稍后重试',
									icon: 'none',
									duration: 2000
								});
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: fixed;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;

		image {
			display: flex;
			width: 142upx;
			height: 142upx;
			margin: 128upx auto 0upx;
		}

		.login {
			margin: 94upx 84upx 0;

			.title {
				margin-left: 6upx;
				line-height: 50upx;
				font-size: 50upx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: rgba(52, 52, 52, 1);
			}

			input {
				margin-top: 94upx;
				font-size: 30upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
				padding-bottom: 40upx;
			}

			.psd {
				display: flex;
				border-bottom: 2upx solid #D3D3D3;
				margin-top: 32upx;
				justify-content: space-between;

				.btn {
					padding: 0;
					width: 200upx;
					height: 60upx;
					border: 1upx solid #D3D3D3;
					border-radius: 23upx;
					font-size: 30upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(153, 153, 153, 1);
					text-align: center;
					line-height: 60upx;
					margin-top: 80upx;
				}

				.btn:after {
					border: none;
				}
			}
		}

		.loginBtn {
			margin: 94upx auto;
			width: 660upx;
			text-align: center;
			line-height: 100upx;
			height: 100upx;
			background: rgba(254, 86, 33, 1);
			box-shadow: 0upx 5upx 12upx 2upx rgba(0, 0, 0, 0.26);
			border-radius: 50upx;
			font-size: 30upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: rgba(255, 254, 254, 1);
		}
		.Agreement{
			position: absolute;
			bottom: 240upx;
			display: flex;
			justify-content: center;
			margin-top: 30upx;
			align-items: center;
			width: 100%;
			.selects{
				width: 24upx;
				height: 24upx;
				border: 2upx solid #808080;
				border-radius: 50%;
			}
			.active{
				background: #fe5621;
			}
			.titleS{
				display: flex;
				margin-left: 6upx;
				font-size: 24upx;
				.link{
					text-decoration: underline;
					color: #007AFF;
				}
			}
		}
	}
</style>
